<style>
    .deploy-window .right-arrow {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #0099CC transparent;
        transform: rotate(90deg);
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 10px;
    }

    .deploy-window .btn-area {
        position: relative;
        text-align: center;
        padding: 10px 0;
    }

    .deploy-window {
        width: 100%;
        height: 100%;
    }

    .deploy-window .layui-row,
    .deploy-window .layui-col-md12,
    .deploy-window .layui-card {
        height: 100%;
    }

    .deploy-window .log-console {
        height: calc(100% - 93px);
        padding: 10px 10px 10px 10px;
        background: #525050;
        color: #f1f4f5;
        counter-reset: step;
        counter-increment: step 0;
        overflow: auto;
    }

    .deploy-window .log-console p {
        white-space: pre;
    }
    .deploy-window .oper-button-group{
        position: relative;
        overflow: visible;
        height: 45px;
        display: inline-block;
    }
    .deploy-window .oper-button-group .group-content{
        position: absolute;
        top: 45px;
        left: 0;
        z-index: 1;
        text-align: left;
        background: #fff;
        padding: 5px;
        border: 1px solid #e4dddd;
        display: none;
        font-size: 0px;
    }

    .deploy-window .oper-button-group:hover .group-content {
        display: block;
    }

    .deploy-window .oper-button-group .group-content > a {
        text-align: left;
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }
    .deploy-window .oper-button-group .group-content > a:first-child{
        margin-top: 0px;
    }
    .deploy-window .layui-card-header .layui-icon.layui-icon-triangle-d{
        line-height: unset;
        position: unset;
        right: unset;
        top: unset;
        margin-top: unset;
        margin-left: 7px;
    }

</style>
<div class="deploy-window layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header btn-area">
                    <span class="oper-button-group">
                        <a class="layui-btn layui-btn-normal group-title">1.生成代码<i class="layui-icon layui-icon-triangle-d"></i></a>
                        <span class="group-content">
                            <a class="layui-btn layui-btn-normal oper_generate">1.生成代码</a>
                            <a class="layui-btn  oper_preview">预览生成代码</a>
                            <a class="layui-btn  oper_template_edit">模板文件管理</a>
                        </span>
                    </span>
                    <span class="right-arrow"></span>
                    <a class="layui-btn layui-btn-normal oper_compile">2.编译代码</a>
                    <span class="right-arrow"></span>
                    <span class="oper-button-group">
                        <span class="layui-btn #(hasStartedWeb?'':'layui-btn-normal') group-title oper_test_group_title">3.#(hasStartedWeb?'停止测试WEB':'启动测试WEB')<i class="layui-icon layui-icon-triangle-d"></i></span>
                        <span class="group-content">
                            <a class="layui-btn #(hasStartedWeb?'':'layui-btn-normal') oper_test">3.#(hasStartedWeb?'停止测试WEB':'启动测试WEB')</a>
                            <a class="layui-btn #(hasStartedWeb?'':'layui-btn-normal') oper_test oper_test_debug">3.#(hasStartedWeb?'停止测试WEB(Debug模式)':'启动测试WEB(Debug模式)')</a>
                            <a class="layui-btn  oper_open_web">打开WEB预览</a>
                        </span>
                    </span>
                    <span class="right-arrow"></span>
                    <a class="layui-btn layui-btn-normal oper_deploy">4.部署本机</a>
                    <span style="margin-left: 20px;" class="oper-button-group">
                        <span class="layui-btn group-title">更多<i class="layui-icon layui-icon-triangle-d"></i></span>
                        <span class="group-content">
                            <a class="layui-btn  oper_log_clean">清空日志</a>
                        </span>
                    </span>
                </div>
                <div class="layui-card-body log-console">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- @formatter:off -->
<script>
    layui.use("form",function(){
        var $ = layui.$;
        var hasStartedWeb = #(hasStartedWeb?'true':'false')
        // 启动websocket
        function startWebSocket() {
            if(!window.logSocket){
                if ("WebSocket" in window) {
                    console.log("您的浏览器支持 WebSocket!");
                    let wsUrl = "ws://" + window.location.host + "/log.ws";
                    window.logSocket = new WebSocket(wsUrl);
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("您的浏览器不支持 WebSocket!");
                }
            }
            if(window.logSocket){
                window.logSocket.onopen = function() {
                    // window.logSocket.send("log")
                    console.log("Log WebSocket 已连接！");
                };
                window.logSocket.onmessage = function (evt) {
                    var received_msg = evt.data;
                    console.log("Log WebSocket 接收到数据！", evt);
                    log(evt.data);
                };
                window.logSocket.onclose = function() {
                    window.logSocket = null;
                    console.log("Log WebSocket 连接已关闭！");
                };
            }
        }

        function log(content){
            let lines = content.split(/\n/g);
            lines.forEach(function(line){
                let p = $('<p></p>');
                if(line.indexOf('\t')==0){
                    p.css("text-indent","2em");
                }
                p.text(line);
                $('.deploy-window .log-console').append(p)
                $(".log-console p:last-child")[0].scrollIntoView();
            })
        }

        startWebSocket()
        $('.deploy-window .oper_log_clean').click(function(){
            $('.deploy-window .log-console').html("");
        })
        $('.deploy-window .oper_preview').click(function(){
            layui.$.post('/generator/code/preview', {generator_id: '#(generatorModel.generator_id)'}, function (str) {
                layer.open({
                    type: 1,
                    title: '代码生成预览',
                    maxmin: true,
                    area: ['80%', '80%'],
                    content: str,
                })
            });
        });
        $('.deploy-window .oper_template_edit').click(function(){
            layui.$.post('/generator/template/fileMgrPage', {template_id: '#(generatorModel.getTemplateId())'}, function (str) {
                layer.open({
                    type: 1,
                    title: '模板文件管理',
                    maxmin: true,
                    area: ['80%', '80%'],
                    content: str,
                })
            });
        });
        let generateCodeFun = function(){
            $.ajax({
                url: '/generator/code/generateCode',
                data: {
                    gid: '#(generatorModel.generator_id)'
                },
                traditional: true,
                type: 'POST',
                success: function (result) {
                    if (result.success) {
                        log("代码生成成功！")
                    } else {
                        log("代码生成失败！"+ (result.message?result.message:"未知错误"))
                    }
                }
            })
        };
        let deployFunc = function(){
            layer.confirm('确定要部署源码与编译文件到本地服务器？<br>1.部署前请先测试代码是否编译执行正常！</br>2.部署将自动创建菜单权限并授权当前用户！',
                {
                    icon: 3, title: '部署代码提示', btn: ['确认', '取消']
                },
                function (index) {
                    $.ajax({
                        url: '/generator/code/deploy',
                        data: {
                            gid: '#(generatorModel.generator_id)'
                        },
                        traditional: true,
                        type: 'POST',
                        success: function (result) {
                            if (result.success) {
                                log('部署成功！可以重启本地服务器查看！如果是开发环境，源码已部署到对应包路径下！');
                            } else {
                                log('部署失败！' + (result.message?result.message:"未知错误"));
                            }
                        },
                        complete: function(){
                            layer.close(index)
                        }
                    })
                }
            )
        };
        let compileFunc = function(){
            $.ajax({
                url: '/generator/code/compile',
                data: {
                    gid: '#(generatorModel.generator_id)'
                },
                traditional: true,
                type: 'POST',
                success: function (result) {
                    if (result.success) {
                    } else {
                        log('编译失败！' + (result.message?result.message:"未知错误"));
                    }
                }
            })
        };
        let operTestWeb = function(){
            $this = $(this);
            var isDebugger = $this.hasClass("oper_test_debug");
            let that = this;
            let url = hasStartedWeb?'/generator/code/stopWeb':'/generator/code/startWeb'
            $.ajax({
                url: url,
                data: {
                    gid: '#(generatorModel.generator_id)',
                    port: -1,
                    debug: isDebugger,
                },
                traditional: true,
                type: 'POST',
                beforeSend: function(){
                    $('.deploy-window .oper_test').addClass('layui-btn-disabled');
                    $('.deploy-window .oper_test').unbind('click')
                    otherBtnStatusChange(hasStartedWeb)
                },
                success: function (result) {
                    if (result.success) {
                        // log('请求成功！');
                        log(result.message);
                        hasStartedWeb = !hasStartedWeb;
                        let title = '3.' + (hasStartedWeb?'停止测试WEB':'启动测试WEB');
                        $('.deploy-window .oper_test_group_title').text(title);
                        $('.deploy-window .oper_test_group_title').toggleClass("layui-btn-normal");
                        $('.deploy-window .oper_test').text(title);
                        $('.deploy-window .oper_test').toggleClass("layui-btn-normal");
                        $('.deploy-window .oper_test.oper_test_debug').text(title + "(Debug模式)")
                        window.test_port = result.port;
                    } else {
                        log( (hasStartedWeb ? '停止':'启动') + '失败！' + (result.message?result.message:"未知错误"));
                    }
                },
                complete: function(){
                    $('.deploy-window .oper_test').removeClass("layui-btn-disabled");
                    $('.deploy-window .oper_test').bind('click', operTestWeb)
                    otherBtnStatusChange(!hasStartedWeb)
                }
            })
        };
        $('.deploy-window .oper_deploy').bind('click', deployFunc)
        $('.deploy-window .oper_compile').bind('click', compileFunc)
        $('.deploy-window .oper_test').bind('click', operTestWeb)
        $('.deploy-window .oper_open_web').click(function(){
            if(!hasStartedWeb ) {
                layer.msg('未启动测试WEB！', {icon: 5});
                return;
            }
            window.open(location.protocol+'//'+location.hostname + ":"+ window.test_port + '/console/#('#')#(generatorModel.toGeneratorConfig().ctlUri)', "");
        })
        function otherBtnStatusChange(enable) {
            if(!enable) {
                $('.deploy-window .oper_generate').unbind('click').addClass("layui-btn-disabled")
            }else{
                $('.deploy-window .oper_generate').unbind('click').bind('click', generateCodeFun).removeClass("layui-btn-disabled")
            }
        }
        otherBtnStatusChange(!hasStartedWeb);
    })
</script>
<!-- @formatter:on -->